import React, { useState, useEffect ,useCallback} from 'react';
import axios from 'axios';
import { Layout, message, Breadcrumb, Row, Col, Input, Form, Button, Table, Radio, Divider, Modal, Select } from 'antd';


const KeMuBianMaBiaoWeiHu = (props) => {
    // console.log(props);
    const [data, setdata] = useState([]);
    const [arrdata, setarrdata] = useState([]);
    const [Option1, setOption1] = useState([]);
    const [Option2, setOption2] = useState([]);
    const [total, settotal] = useState([]);
    const [page, setpage] = useState(1);
    const [kemuming, setkemuming] = useState("");
    const [kemubianma, setkemubianma] = useState("");
    const [shoufeileibiema, setShoufeileibiema] = useState("");
    const [keshima, setkeshima] = useState("");
    const [kemu, setkemu] = useState({});
    const [shoufeileibie, setshoufeileibie] = useState("");
    const [keshi, setkeshi] = useState("");
    // const [selectionType, setSelectionType] = useState('checkbox');
    const [selectionType, setSelectionType] = useState('checkbox');
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const [isModalVisible2, setIsModalVisible2] = useState(false);

    const { Option } = Select;

    const [form] = Form.useForm()
    const [form2] = Form.useForm()



    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 },
    };
    const paginationProps = {
        page: 10,
        // onChange : (page) => this.handleTableChange(page),
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    //表格
    const columns = [
        {
            key: "key",
            title: '科目编码',
            dataIndex: 'keMuMa',
        },
        {
            key: "key",
            title: '科目名称',
            dataIndex: 'keMuMingCheng',
        },
        {
            title: '操作',
            dataIndex: 'caozuo',
            render: (text, record) => <div>
                <Button onClick={() => { showModal1(record) }} style={{marginLeft:"10px",marginRight:"10px"}}>查看</Button>
                <Button onClick={() => { deldata(record) }}>删除</Button>
            </div>,
        },
    ]
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setarrdata(selectedRows)
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };

    //查询 
    const showModal1 = (record) => {
        setIsModalVisible1(true);
        let str1 = ""
        let str2 = ""
        let arr = []
        arr= record.keMuMingCheng.split("科")
        str1 = arr[0]+"科"
        str2 = arr[1]
        record.keShiMingCheng=str1
        record.shouFeiLeiXingMingCheng=str2
        form.setFieldsValue(record)

    };

    const handleOk1 = () => {
        setIsModalVisible1(false);
    };

    const handleCancel1 = () => {
        setIsModalVisible1(false);
    };
    //新增
    const showModal2 = () => {

        setIsModalVisible2(true);
    };
    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    const xingzen = (values) => {
        setIsModalVisible2(false);
        console.log(values);
        let str1 = ''
        let str2 = ''
        console.log(Option2);
        for (let i = 0; i < Option2.length; i++) {
            let temp = Option2[i]

            if (temp.value == values.num1) {
                str1 = temp.label
            }
            if(str1 == ""){
                str1 = values.name1
            }

        }
        for (let i = 0; i < Option1.length; i++) {
            let temp = Option1[i]

            if (temp.value == values.num2) {
                str2 = temp.label
            }
            if(str2 == ""){
                str2 = values.name2
            }

        }
        console.log(shoufeileibiema +",", keshima +",", str2 +"," , str1);
        axios("/keMuBianMa/xinZeng", {
            method: "POST",
            headers: { "content-Type": "application/json" },
            params: {
                keMuMa: values.num2 + values.num1,
                keMuMingCheng: str2 + str1
            }
        })
            .then((response) => {
                console.log(response);
                if(response.data.code===500){
                    message.info(response.data.msg);
                }
                getData()
            })
            .catch((error) => {
                console.log(error);
            });
    };
    //删除
    const deldata =(record)=>{
        // console.log(arrdata);
        
        axios("/keMuBianMa/shanChu", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            params:{id:record.id},
        })
            .then((response) => {
                console.log(response);
                alert("成功")
                getData()
            })
            .catch((error) => {
                console.log(error);
            });
    }

    //数组去重
    function unique(arr) {
        let unique = {};
        arr.forEach(function (item) {
            unique[JSON.stringify(item)] = item;//键名不会重复
        })
        arr = Object.keys(unique).map(function (u) {
            //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
            return JSON.parse(u);
        })
        return arr;
    };

    //收费类别
    const Shoufeileibie = useCallback((e) => {

        let Shoufeiinput = document.getElementById("name1")
        // let Shoufeimainput = document.getElementById("num1")
        console.log(e);
        if (e !== undefined) {
            Shoufeiinput.disabled = true
            // console.log(shoufeimainput);
            Shoufeiinput.value = ""
            // Shoufeimainput.value = e
            form2.setFieldsValue({
                num1:e
            })
            // console.log(Option1)
            // console.log(shoufeileibiema)
        } if (e == undefined) {
            Shoufeiinput.disabled = false
            // Shoufeimainput.value = ""
            // setShoufeileibiema("")
            form2.setFieldsValue({
                num1:""
            })
        }

    })
    //科室
    const Keshi = (e) => {

        let Keshiinput = document.getElementById("name2")
        let Keshimainput = document.getElementById("num2")
        console.log(e);
        if (e !== undefined) {
            Keshiinput.disabled = true;
            // console.log(shoufeimainput);
            Keshiinput.value = ""
            form2.setFieldsValue({
                num2:e
            })
        } if (e == undefined) {
            Keshiinput.disabled = false;
            // Keshimainput.value = ""
            // setkeshima("")
            form2.setFieldsValue({
                num2:e
            })

        }

    }
    const getData = () => {
        axios("/keMuBianMa/chaXunFenYe", {
            method: "GET",
            // headers: { "content-Type": "application/json" },
            params: {
                page: page,
                keMuMa: kemubianma,
                keMuMingCheng: kemuming
            }
        })
            .then((response) => {
                console.log(response);

                if (response.data.code == 200) {
                    let temp1 = []
                    let temp2 = []
                    for (let i = 0; i < response.data.data.length; i++) {
                        let arr1 = []
                        let str1 = ''
                        let str2 = ""
                        let obj1 = {}
                        let obj2 = {}
                        response.data.data[i].key = i + 1
                        arr1 = response.data.data[i].keMuMingCheng.split("科")
                        str1 = response.data.data[i].keMuMa.substr(0, 2)
                        str2 = response.data.data[i].keMuMa.substr(2, 2)
                        obj1.label = arr1[0] + "科"
                        obj1.value = str1
                        obj2.label = arr1[1]
                        obj2.value = str2

                        temp1.push(obj1)
                        temp2.push(obj2)

                    }
                    //数组去重
                    let arr1 = []
                    let arr2 = []
                    arr1 = unique(temp1)
                    arr2 = unique(temp2)
                    console.log(arr2);
                    setOption1(arr1)
                    setOption2(arr2)
                    setdata(response.data.data)
                    console.log(data);
                    settotal(response.data.data.length)
                } else {
                    console.log(response.msg)
                }
            })
            .catch((error) => {
                console.log(error);
            });
    }
    const chaxun = () => {
        console.log(kemuming, kemubianma);
        getData()
    }
    useEffect(() => {
        getData()
    }, []);

    return (
        <>
            <Row>
                <Breadcrumb style={{ marginBottom: 24 }}>
                    <Breadcrumb.Item>系统维护</Breadcrumb.Item>
                    <Breadcrumb.Item>科目编码维护</Breadcrumb.Item>
                </Breadcrumb>
            </Row>
            <Row>
                <Col span="24">
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 100 }}>
                        <Row>
                            <Col span="8">
                                <Form layout="inline">
                                    <Form.Item
                                        label="科目名"
                                        name="kemuming"
                                    >
                                        <Input onChange={(e) => { setkemuming(e.target.value) }}></Input>
                                    </Form.Item>
                                    <Form.Item
                                        label="科目编码"
                                        name="kemubianma"
                                    >
                                        <Input onChange={(e) => { setkemubianma(e.target.value) }}></Input>
                                    </Form.Item>
                                </Form>
                            </Col>
                            <Col>
                                <Button type="primary" onClick={chaxun}>
                                    查询
                                </Button>
                                <Button type="primary" style={{ marginLeft: 50 }} onClick={showModal2}>
                                    新增
                                </Button>
                            </Col>
                        </Row>

                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                        <Row>
                            
                            <Col span="2">
                                <Button>导出</Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <Divider />
                                <Table
                                    rowSelection={{
                                        type: selectionType,
                                        ...rowSelection,
                                    }}
                                    columns={columns}
                                    dataSource={data}
                                    pagination={paginationProps}
                                    childrenColumnName="antdChildren"
                                />
                            </Col>
                        </Row>

                    </div>
                </Col>
            </Row>
            <Modal title="查看："
                visible={isModalVisible1}
                onOk={handleOk1}
                onCancel={handleCancel1}
                width={600}
            >
                <Form {...layout} form={form}>
                    <Form.Item
                        label="收费类别码："
                        name="shouFeiLeiXingDaiHaoId"
                    >
                        <Input id="chakaninput1" disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="科室码："
                        name="keShiBianHaoId"
                    >
                        <Input id="chakaninput2" disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费类别："
                        name="shouFeiLeiXingMingCheng"
                    >
                        <Input id="chakaninput3" disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="科室："
                        name="keShiMingCheng"
                    >
                        <Input id="chakaninput4" disabled></Input>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="新增："
                visible={isModalVisible2}
                onCancel={handleCancel2}
                width={600}
                footer
            >
                <Form {...layout} form={form2} onFinish={xingzen} name="basic" onValuesChange={(c,all)=>{
console.log(c);
console.log(all)

                }}>
                    <Form.Item
                        label="收费类别："
                        name="name1"
                    >
                        <Select name="name1" id="Selectname1" options={Option2} placeholder="选择已有收费类别" onChange={Shoufeileibie} allowClear></Select>
                    </Form.Item>
                    <Form.Item
                        label="收费类别："
                        name="name1"
                    >
                        <Input id="name1" placeholder="输入新的收费类别" onChange={(e) => { setshoufeileibie(e.target.value) }}></Input>
                    </Form.Item>
                    <Form.Item
                        label="科室："
                        name="name2"
                    >
                        <Select id="Selectname2" options={Option1} placeholder="选择已有科室" onChange={Keshi} allowClear></Select>
                    </Form.Item>
                    <Form.Item
                        label="科室："
                        name="name2"
                    >
                        <Input id="name2" placeholder="输入新的科室" onChange={(e) => { setkeshi(e.target.value) }}></Input>
                    </Form.Item>
                    <Form.Item
                        label="收费类别码："
                        name="num1"
                    >

                        <Input id="num1" placeholder="输入收费类别码" defaultValue={shoufeileibiema} value={shoufeileibiema} onChange={(e) => { setShoufeileibiema(e.target.value) }}></Input>
                    </Form.Item>
                    <Form.Item
                        label="科室码："
                        name="num2"
                    >
                        <Input id="num2" placeholder="输入科室码" onChange={(e) => { console.log(e); setkeshima(e.target.value) }}></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default KeMuBianMaBiaoWeiHu;
